<template>
  <div class="center_bottom">
    <div class="msg" v-if="roomEquipmentData.sensor == null">请选择房间</div>
    <div class="msg" v-else-if="roomEquipmentData.sensor.length == 0">暂无数据</div>
    <div style="width: 100%;height: 100%;padding: 0 30px">
    <div class="div_iu"  v-for="(sensor,i) in roomEquipmentData.sensor" :key="i">
      <!-- <span class="left" style="width: 60px;height: 60px;line-height: 60px;text-align: center;margin-top: 5px;">
        
      </span> -->
      <i class="iconfont icon-wendu" v-if="sensor.deviceName=='温度'" style="font-size: 45px;margin-left: 40px;"></i>
      <i class="iconfont icon-shidu" v-else-if="sensor.deviceName=='湿度'" style="font-size: 45px;margin-left: 40px;"></i>
      <i class="iconfont icon-guangzhao" v-else-if="sensor.deviceType==15" style="font-size: 45px;margin-left: 40px;"></i>
      <i class="iconfont icon-turangwendu" v-else-if="sensor.deviceType==16" style="font-size: 45px;margin-left: 40px;"></i>
      <i class="iconfont icon-xiangsukejitubiao" v-else-if="sensor.deviceType==17" style="font-size: 45px;margin-left: 40px;"></i>
      
      <p>{{ sensor.deviceName }}</p>
      <span class="right" >{{ sensor.deviceData }}</span>
    </div>
  </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
    };
  },
  computed:{
      roomEquipmentData(){
          return this.$store.state.roomEquipmentData;
      }
  },
  created() {
   
        // this.getData()
    },
    beforeDestroy() {
        this.clearData()
    },
  methods: {
    getData() {
      this.roomEquipmentData = this.getRoomEquipmentData;
       console.log(this.roomEquipmentData)
        // 轮询
        this.switper();
    },
    clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
     //轮询
     switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(looper, 1000);
        },
  }
};
</script>
<style lang="scss" scoped>
.msg{
      width: 100%;
      text-align: center;
      font-size: 24px;
    }
.center_bottom {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  .div_iu{
    font-size: 22px;
    text-align: center;
    width: 45%;
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: space-between;
    float: left;
    margin: 20px 1%;
    background-color:rgba(251, 251, 251, 0.18);
    border-radius: 10px;
    .right{
      font-size: 26px;
      float:right;
      margin-right: 40px;
    }
    .left{
      width: 50px;
      height: 50px;
      float: left;
      margin-left: 20px;
    }
  }
  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
